<!--
全局事件总线（GlobalEventBus）
1. 一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。
2. 安装全局事件总线：
   ```
   new Vue({
       ......
       beforeCreate() {
         Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
       },
       ......
   })
   ```
3. 使用事件总线：
    - 1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的<span style="color:red">回调留在A组件自身。</span>
       ```
       methods(){
         demo(data){......}
       }
       ......
       mounted() {
         this.$bus.$on('xxxx',this.demo)
       }
       ```
    - 2. 提供数据：```this.$bus.$emit('xxxx',数据)```
4. 最好在beforeDestroy钩子中，用$off去解绑<span style="color:red">当前组件所用到的</span>事件。
-->

<template>
  <div class="app">
    <h1> {{ msg }} </h1>
    <School></School>
    <Student></Student>
  </div>
</template>

<script>
// 第一步：引入组件，其中在脚手架里面，后缀.vue写不写都可以
import Student from './components/Student.vue'
import School from "./components/School.vue";

export default {
  name: 'App',
  // 第二步：注册组件
  // components: {
  //   School,
  //   Student,
  // }
  // 使用对象写法
  components: {
    Student,
    School,
  },
  data() {
    return {
      msg: '欢迎学习Vue，我在尚硅谷学习Vue!!!',
    }
  },
}
</script>

<style>
.app {
  background-color: gray;
  padding: 5px;
}
</style>